<template>
  <div >
    <!-- 历史  -->
    
    <div id="top">
        <div class="top-t">
          <h3>历史记录</h3>
          <van-icon name="delete-o"  @click="clear()"/>
        </div>
        <div class="top-b">
          <van-tag plain v-for="(item,index) in history" :key="index" 
          type="default" class="tag" @click="goods(item)">{{item}}
          </van-tag>
        </div>
    </div>
    <!-- 热门 -->
    <div id="bottom">
        <div class="bottom-t">
          <h3>热门搜索</h3>
        </div>
        <div class="bottom-b">
          <van-tag plain v-for="(item,index) in hotgood" :key="index" 
          :type="item.is_hot==1 ?'danger':'default'"  class="tag" 
          @click="goods(item.keyword)">{{item.keyword}}
          </van-tag>
        </div>
    </div>
     
     
  </div>
</template>

<script>
  //引入删除历史
  import {Clearhistory} from "@/request/api.js"
export default {
  data () {
    return {
        
    }
  },
  methods:{
    //传递给父
     goods(val){
        this.$emit("getval",val)
     },
     //删除历史记录
     clear(){
      
      Clearhistory()
      .then(res=>{
        if(res){
          this.$toast.success('删除成功');
          this.$router.go(0)
        }
      })
     }
  },
  created(){

  },
  //从父组件内传过来的值
  props:['hotgood',"history"]
}
</script>

<style lang="less">
    #top{
    background-color: #fff;
    margin-bottom: 0.2rem;
     .top-t{
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 95%;
      h3{
        font-size: large; 
       }
      
    }
     .top-b{
        width: 95%;
        margin: auto;
        padding-bottom:0.15rem ;
        .tag{
          margin-right: 0.1rem;
          margin-top:0.1rem ;
        }
     }
   
  }
    #bottom{
    padding: 0.15rem 0;
    background-color: #fff;
     .bottom-t{
        display: flex;
        justify-content: space-between;
        margin: auto;
        width: 95%;
      h3{
        font-size: large; 
       }
      
    }
     .bottom-b{
        width: 95%;
        margin: auto;
        padding-bottom:0.15rem ;
        .tag{
          margin-right: 0.1rem;
          margin-top:0.1rem ;
        }
     }
   
  }


</style>